import React, { Component } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import {
  Button, WhiteSpace, WingBlank, Toast
} from 'antd-mobile-rn';
import { NavigationActions } from 'react-navigation';
import HeaderBackButton from '../../components/HeaderBackButton';
import DatePicker from '../../components/DatePicker';
import TextInut from '../../components/TextInut';
import ImagePicker from '../../components/ImagePicker';
import { postCardVoucherNew } from '../../model/cardWoucher';

export default class CardWoucherForm extends Component {
  // 定义导航栏

  static navigationOptions = ({ navigation }) => {
    const goback = navigation.getParam('goback');
    return {
      title: '新增卡卷',
      headerStyle: {
        backgroundColor: '#3ca4d9'
      },
      headerTintColor: '#fff', // 导航字体颜色
      headerLeft: <HeaderBackButton click={goback} color="#fff" />
    };
  };

  constructor() {
    super();
    this.state = {
      name: '', // 卡卷名称
      money: '', // 地址金额
      validityPeriod: '', // 有限期
      files: [
        // {
        //   url: 'https://mxb-bucket.oss-cn-beijing.aliyuncs.com/images',
        //   id: '2121'
        // },
        // {
        //   url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
        //   id: '2121'
        // }
      ]
    };
  }

  // 生命周期render前
  componentWillMount() {
    const { navigation } = this.props;
    navigation.setParams({ goback: this.goback.bind(this) });
  }

  async onSubmit() {
    //
    const {
      name, money, validityPeriod, files
    } = this.state;
    // TODO: 时间没有格式化 多图没有做处理
    await postCardVoucherNew({
      terminalType: 'MOBILE',
      cardVoucher: {
        name: name || '', // 卡券名称
        price: money, // 卡券面值
        termDate: validityPeriod, // 卡券有效期
        imageUrl: files.length ? files[0].url : '', // 图片路径
      }
    });
    Toast('添加成功!');
  }

  imagesChange(files) {
    this.setState({
      files
    });
  }

  goback() {
    const { navigation } = this.props;
    const backAction = NavigationActions.back();
    navigation.dispatch(backAction);
  }


  render() {
    const {
      name, money, validityPeriod, files
    } = this.state;
    return (
      <ScrollView
        contentContainerStyle={styles.container}
        automaticallyAdjustContentInsets={false}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
      >
        <WingBlank>
          <WhiteSpace size="lg" />
          <TextInut
            style={styles.input}
            placeholder="请输入卡卷名称"
            underlineColorAndroid="transparent"
            value={name}
            onChangeText={(text) => {
              this.setState({ name: text });
            }}
          />
          <WhiteSpace size="lg" />
          <TextInut
            style={styles.input}
            placeholder="请输入低值多少元"
            value={money}
            onChangeText={(text) => {
              this.setState({ money: text });
            }}
          />
          <WhiteSpace size="lg" />
          <DatePicker
            value={validityPeriod}
            mode="date"
            placeholder="请选择有效日期"
            minDate={new Date()}
            maxDate={new Date(new Date().getFullYear() * 1 + 20, 12, 31)}
            onChange={(value) => {
              this.setState({ validityPeriod: value });
            }}
            format="YYYY-MM-DD"
          />
        </WingBlank>
        <WhiteSpace size="lg" />
        <View>
          <ImagePicker
            // selectButtonImageUrl="https://mxb-bucket.oss-cn-beijing.aliyuncs.com/232323232/1C8DD062-A12D-4074-A372-958DBCF234FA1531661598624233479IMG_0005.JPG"
            files={files}
            imageStyle={{
              width: 100,
              height: 100
            }}
            selectable
            deletable
            max={3}
            containerStyle={{}}
            change={newFiles => this.imagesChange(newFiles)}
          />
        </View>

        <Button
          type="primary"
          style={styles.btnWrap}
          onClick={() => {
            this.onSubmit();
          }}
        >
          提交
        </Button>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center'
  }
});
